<template>
	<view class="performance">
		<view class="top">
			<view class="list">
				<view class="msg">
					<image :src="initData.image" class="portrait" />
					<!-- <image src="/static/img/bottom.png"/> -->
					<text class="name">{{ initData.member.nickName }}</text>
					<text class="lv" v-if="initData.member.memberRank">{{ initData.member.memberRank.desp }}</text>
				</view>
				<view class="number">编号：{{ initData.member.agentSn }}</view>
			</view>
			<view class="money">
				<text :class="{ active: active == 'own' }" @click="cut('own')">个人订单金额：<text v-if="statistics.ownAchi>100000">{{ownAchi}}万元</text><text v-else>{{statistics.ownAchi}}元</text></text>
				<text :class="{ active: active == 'group' }" @click="cut('group')">团队订单金额：<text v-if="statistics.groupAchi>100000">{{groupAchi}}万元</text> <text v-else>{{statistics.groupAchi}}元</text></text>
			</view>
		</view>
		<view class="flex">
			<view class="time">
				<picker mode="date" :value="date" start="2000-01-01" :end="endDate" @change="bindDateChange">
					<view class="uni-input" v-show="date">{{ date }}</view>
					<view class="uni-placeholder" v-show="!date">请选择下单开始时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="icon"></image>
			</view>
			<view class="time">
				<picker mode="date" :value="enddate" start="2000-01-01" :end="endDate" @change="bindendDateChange">
					<view class="uni-input" v-show="enddate">{{ enddate }}</view>
					<view class="uni-placeholder" v-show="!enddate">请选择下单结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="icon"></image>
			</view>
		</view>
		
		<view class="table">
			<view class="th">
				<view class="tr">序号</view>
				<view class="tr">订单号</view>
				<view class="tr">订单时间</view>
				<view class="tr">所属代理</view>
				<view class="tr">订单金额</view>
			</view>
			<view class="td" v-for="(item,index) in dataList" :key="index">
				<view class="tb">{{index}}</view>
				<view class="tb">{{item.orderSn}}</view>
				<view class="tb">{{item.createdTime}}</view>
				<view class="tb">{{item.agentName}}</view>
				<view class="tb">{{item.orderPrice}}</view>
			</view>
			
		</view>
		<view class="pagination" v-if="pagination">
			<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
				<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
				上一页
			</view>
			<view class="center">{{ paging.page }}/{{ paging.total }}</view>
			<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
				下一页
				<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
			</view>
		</view>
		<view v-if="dataList.length==0" class="notavailable">
			<image src="../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import index from '../../servers/agent/index.js';
export default {
	components: { uniIcons },
	data() {
		return {
			date: null,
			active: 'own',
			endDate: null,
			enddate:null,
			paging: {
				page: 1,
				total: 100
			},
			pagination:true,
			initData:[],
			statistics:[],
			dataList:[],
			ownAchi:'',
			groupAchi:''
		};
	},
	mounted() {
		this.endDate = this._endDate();
		this.getDate();
		this.getlist(this.active)
	},
	methods: {
		getDate(){
			uni.showLoading({
				title:'数据加载中'
			})
			index.agentData()
				.then(res => {
					console.log(res)
					this.initData = res.data;
					if (this.initData.member.avator) {
						this.initData.image = this.imgCDNUrl + this.initData.member.avator;
					}
					console.log(res, _this.initData);
					uni.hideLoading();
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
				index.achievement()
					.then(res => {
						this.statistics=res.data;
						if(res.data.ownAchi>100000){
							this.ownAchi=(Number(this.statistics.ownAchi)/10000).toFixed(2)
						}
						if(res.data.groupAchi>100000){
							this.groupAchi=(Number(this.statistics.groupAchi)/10000).toFixed(2)
							
						}
					})
					.catch(err => {
						console.log(err)
						console.log(new Error('请检查网络后重试'));
					});
					
		},
		getlist(e){
			uni.showLoading({
				title:'数据加载中'
			})
			var obj={
				currentPage: this.paging.page,
				pageSize: 10,
				startTime:this.date,
				endTime:this.enddate
			}
			index.achievementlist(obj,e)
				.then(res => {
					if(res.code==200){
						if(res.data.records.length>0){
							this.paging.total = Math.ceil(res.data.total / res.data.size);
							this.dataList = res.data.records;
							this.pagination=true
						}else{
							this.pagination=false
						}
						uni.hideLoading();
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
				.catch(err => {
					console.log(err)
					console.log(new Error('请检查网络后重试'));
				});
							
		},
		bindDateChange(e) {
			this.date = e.target.value;
			this.dataList=[]
			this.getlist(this.active)
		},
		bindendDateChange(e){
			this.enddate = e.target.value;
			if(this.date&&this.enddate&&(this.enddate<this.date)){
				uni.showToast({
					title:'结束时间不能小于开始时间',
					icon:'none'
				})
				return;
			}
			this.dataList=[]
			this.getlist(this.active)
		},
		cut(e) {
			this.active = e;
			this.getlist(e)
		},
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.getlist(this.active)
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.getlist(this.active)
			}
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.flex{
	display: flex;
	.time{
		width: 50%;
	}
}
.performance {
	padding: 1rpx 0;
	.top {
		margin: 34rpx 20rpx;
		background: #ffffff;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		border-radius: 10rpx;
		.msg {
			position: relative;
			font-size: 30rpx;
			padding: 52rpx 0 0 163rpx;
			.portrait {
				position: absolute;
				left: 20rpx;
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
			.name {
				margin-right: 30rpx;
			}
			.right {
				margin-right: 20rpx;
			}
		}
		.number {
			font-size: 28rpx;
			color: #999999;
			margin-top: 28rpx;
			padding: 0rpx 20rpx 46rpx 163rpx;
		}
		.money {
			padding: 35rpx 20rpx;
			box-shadow: 5rpx 0px 20rpx #c5c5c5;
			>text {
				display: inline-block;
				width: 50%;
				font-size: 26rpx;
				line-height: 40rpx;
				box-sizing: border-box;
				text-align: center;
			}
			>text:nth-last-child(1) {
				border-left: 1px solid #e1e1e1;
			}
			.active {
				color: #bd3c8c;
				font-weight: 900;
			}
		}
	}
	.time {
		position: relative;
		padding: 0 20rpx;
		picker {
			font-size: 26rpx;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		.icon {
			position: absolute;
			right: 40rpx;
			top: 42rpx;
			width: 36rpx;
			height: 34rpx;
			line-height: 90rpx;
			text-align: center;
		}
	}
	.table {
		margin-top: 50rpx;
		.th,
		.td {
			display: flex;
			flex-direction: row;
			line-height: 94rpx;
			.tr,
			.tb {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				flex: 1;
				overflow: hidden;
				
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.tr:nth-child(1),
			.tb:nth-child(1) {
				width: 300rpx;
			}
			.td{
				line-height: 26rpx;
			}
		}
		.th {
			background: #e1e1e1;
		}
		.td:nth-child(2n + 1) {
			background: #f4f4f4;
		}
	}
}
</style>
